import errorIcon from '@/assets/images/public/icon-error.png';
import infoIcon from '@/assets/images/public/icon-info.png';
import successIcon from '@/assets/images/public/icon-success.png';
import { NImage } from '@/components/Uikit';
import { useMantineTheme } from '@mantine/core';
import { type NotificationData, Notifications, notifications } from '@mantine/notifications';
import React, { useCallback } from 'react';
import styles from './Toast.module.less';

export const NToast = React.memo(() => {
  const theme = useMantineTheme();
  return (
    <Notifications
      position="bottom-center"
      limit={1}
      style={{
        position: 'fixed',
        width: '100%',
        top: '50%',
        transform: 'translateY(-50%)',
        textAlign: 'center',
        zIndex: theme.other.zIndex.toast,
      }}
    />
  );
});

export const useToast = () =>
  useCallback(
    (
      message: NotificationData['message'],
      type?: 'success' | 'error' | 'info',
      options?: Omit<NotificationData, 'message'>,
    ) => {
      const icon = type ? { success: successIcon, error: errorIcon, info: infoIcon }[type] : undefined;

      // 显示通知
      notifications.show({
        message: <>{message}</>,
        classNames: styles, // 自定义通知样式类
        withCloseButton: false, // 不显示关闭按钮
        autoClose: 5000, // 自动关闭时间
        icon: icon ? (
          <NImage
            style={{
              background: 'rgba(0,0,0,0.8)',
            }}
            src={icon}
          ></NImage>
        ) : null, // 根据类型选择图标
        // 扩展其他通知配置，确保类型安全
        ...options,
      });
      // 清理通知队列，防止积累
      notifications.cleanQueue();
    },
    [], // 确保回调在组件生命周期内保持不变
  );
